<template>
  <div class="approver">
    <div class="approver-item" v-for="(item, index) in approver" :key="index">
      <div class="approver-item-c">
        <!--  -->
        <el-avatar :src="headerImgSrc"></el-avatar>
        <!-- :closable="!readonly" -->
        <!-- {{ item.showName || item.approvalName || item.userName }} -->
        <el-tag type="success" @close="handleDelOpportunitiesApprover(index)">
          {{ item.approvalName }}
        </el-tag>

        <div v-if="!isCc">第{{ item.approvalLevel }}级审批人</div>
        <template
          v-if="
            !isCc &&
            typeof item.state === 'number' &&
            item.state !== 0 &&
            !isEdit
          "
        >
          <div>{{ item.byTheDate }}</div>
          <!-- <div>{{ item.state | stateNameFilter }}</div> -->
          <div>审批意见：{{ item.approvalOpinion }}</div>
        </template>
      </div>
      <div v-if="!isCc && index !== approver.length - 1">
        <i class="el-icon-right"></i>
      </div>
    </div>
    <div v-if="!readonly">
      <!-- size="medium" -->
      <el-button
        link
        type="primary"
        round
         v-if="hasButtonSave"
        @click="
          approverDialog = true;
          handleAddPeople();
        "
        style="position: relative; top: -3px; left: -10px"
      >
        {{ isCc ? "添加抄送人" : "添加审批人" }}
      </el-button>
    </div>
    <el-dialog
      :title="addTitle"
      v-if="approverDialog"
      v-model="approverDialog"
      append-to-body
      width="700px"
      class="group-dialog"
    >
      <div class="approver-inquiry">
        <el-form
          :model="groupParams"
          label-width="75px"
          ref="ruleForm"
          label-position="right"
          class="login-name"
        >
          <!-- @submit.native.prevent -->
          <el-form-item label="员工姓名" prop="showName">
            <el-input
              class="filter-item"
              v-model="showName"
              :clearable="true"
              placeholder="员工姓名"
            />
          </el-form-item>

          <!-- <el-form-item label="所属部门" prop="">


          </el-form-item> -->
        </el-form>
        <!-- slot="operator" -->
        <!-- <el-button
          class="aaa"
          type="primary"
          :plain="true"
          :icon="Search"
          size="mini"
          @click="getUserList(true)"
          >查询</el-button
        > -->
        <el-button class="aaa" type="primary" @click="onSubmit" :icon="Search"
          >查询</el-button
        >
      </div>
      <div>
        <!-- size="mini"  style="width: 100%"-->
        <el-table
          :data="groupList"
          header-cell-class-name="table-header-gray"
          @selection-change="handleSelectionChange(1)"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column label="用户名" prop="userName" align="center">
          </el-table-column>
          <el-table-column label="员工姓名" prop="nickName" align="center">
          </el-table-column>
          <el-table-column
            label="部门"
            prop="dept.deptName"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <!-- size="mini" -->
              <!-- {{
                SysUserStatus.getValue(scope.row.userStatus)
              }} -->
              <el-tag :type="getUserStatusType(scope.row.userStatus)">
                正常状态
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="100"
          >
            <template #default="scope">
              <!-- size="mini" -->
              <!-- approverDialog = false; -->
              <el-button type="primary" @click="handleChooseapprover(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="page_size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, prev, pager, next, sizes"
            :total="total"
          ></el-pagination>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script  setup>
import headerImg from "@/assets/images/default-header.png";
import { onMounted, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { selectsPeople } from "@/api/project/conversion";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();

const stateNameArr = ["待审核", "审核通过", "审核驳回"];
const headerImgSrc = ref(headerImg);
const addTitle = ref("添加审批人");

const groupList = ref([]);
const hasButtonSave = ref(false);
// 1.按钮保存隐藏
const hasButton = () => {
  if (route.query.type === "3") {
    hasButtonSave.value = false;
  } else {
    hasButtonSave.value = true;
  }
};

// 获取复选框多数据
const handleSelectionChange = (type) => {};

const approverDialog = ref(false);

const approver = ref([]);

const props = defineProps({
  // 请求用户列表的函数
  getUserFn: {
    type: Function,
    default: () => {},
  },
  // 请求用户列表的函数
  // getRoleFn: {
  //   type: Function,
  //   default: SystemController.getRoleList,
  // },
  // 审批人类型，1-商机任务;3-项目立项;4-项目任务;21-盖章申请;22-用车审批;23-投标审批;24-合同盖章审批;25-资质盖章审批;50-合同盖章;52-合同会审
  typeId: {
    default: undefined,
  },
  // 是否为抄送
  isCc: {
    type: Boolean,
    default: false,
  },
  // 角色按钮是否显示
  role: {
    type: Boolean,
    default: false,
  },
  // 回显的话为true
  readonly: {
    type: Boolean,
    default: false,
  },
  // 是否为编辑
  isEdit: {
    type: Boolean,
    default: false,
  },
  approverList: {
    default: undefined,
  },
});

// 查询
const onSubmit = () => {};

const getUserStatusType = (status) => {
  // if (status === SysUserStatus.NORMAL) {
  //   return "success";
  // } else if (status === SysUserStatus.LOCKED) {
  //   return "danger";
  // } else {
  //   return "info";
  // }
};


const handleAddPeople = () => {
  if (props.isCc) {
    addTitle.value = "添加抄送人";
  } else {
    addTitle.value = "添加审批人";
  }
};
let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);
let showName = ref("");

// 查询功能
const approverData = async () => {
  try {
    let params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...showName.value,
    };
    const response = await selectsPeople(params);
    if (response.code === 200 && response.rows.length >= 0) {
      groupList.value = response.rows;
      total.value = Number(response.total);
    }
  } catch (err) {
    console.log(err);
  }
};

const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  approverData();
};

const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  approverData();
};

const handleDelOpportunitiesApprover = () => {};

const emit = defineEmits(["handleChooseapprover"]);

// 审批人选择
const handleChooseapprover = (row) => {
  // 选择之后，带到审批人列表
  approver.value.push({
    approvalLevel: approver.value ? approver.value.length + 1 : 1,
    approvalName: row.nickName,
    userId: row.userId,
  });
  // console.log( approver.value,'-----审批列表----')
  let userIds = approver.value.map((item) => item.userId);
  approverDialog.value = false;
  emit("handleChooseapprover", userIds);
};

onMounted(async () => {
    hasButton();
  await approverData();
});
</script>
<style lang="scss" scoped>
.approver {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .approver-item {
    display: flex;
    justify-content: space-between;
    .approver-item-c {
      padding: 0 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      & > * {
        margin: 5px 0;
      }
    }
  }

  :deep(.el-form-item__content) {
    display: flex;
  }
}
.approver-inquiry {
  display: flex;
  padding: 0 10px;
  line-height: 28px;
  height: 28px;
}
.aaa {
  padding-left: 17px;
  margin-left: 250px;
  position: relative;
  top: -15px;
  left: 5px;
}
.login-name {
  position: relative;
  top: -15px;
  left: -13px;
}
</style>
